<template>
  <div class="detail-weblog" :style="{ backgroundColor: weblogBackgroud }">
    <!-- 白天/黑夜调节 -->
    <div class="operation">
      <SwitchColor></SwitchColor>
    </div>
    <!-- 日志内容 -->
    <div class="container" :style="{ color: weblogColor }">
      <div class="title">{{ weblogInfo.title }}</div>
      <div class="createTime">
        <span>发表于: {{ weblogInfo.createAt ? formatTime(weblogInfo.createAt) : "" }}</span>
        <span>上次更新: {{ weblogInfo.updateAt ? formatTime(weblogInfo.updateAt) : "" }}</span>
      </div>
      <div class="text-area" v-html="weblogInfo.content"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useStore } from "vuex"
import { useRoute } from "vue-router";
import { getWeblog } from "../../service/api_weblog";
import { formatTime } from "../../utils/formatTime";
import SwitchColor from "./cpns/swich-color.vue"
// 页面数据
const route = useRoute();
const store = useStore()
const { id } = route.params;
const weblogInfo = ref({});
const weblogBackgroud = computed(() => store.state.weblog.weblogBackground)
const weblogColor = computed(() => store.state.weblog.weblogColor)
// 网络请求
getWeblog(id).then((res) => {
  const { data } = res;
  weblogInfo.value = data;
});
</script>

<style scoped>
.detail-weblog {
  width: 100%;
  height: 100%;
  padding-bottom: 60px;
  box-sizing: border-box;
  overflow: auto;
}
.operation {
  position: fixed;
  top: 30px;
  right: 40px;
}
.container {
  width: 1000px;
  text-align: center;
  margin: 0 auto;
  overflow: auto;
}
.title {
  font-size: 36px;
  font-weight: bold;
  margin: 40px 0 20px 0;
}

.createTime {
  font-size: 16px;
  margin-bottom: 30px;
}
.createTime span {
  margin: 0 20px;
}

.text-area {
  font-size: 20px;
  text-align: justify;
  line-height: 40px;
  letter-spacing: 2px;
  text-indent: 50px;
}
</style>
